<template>
  <div class="login-box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="密码登录" name="password">
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <!-- 手机号输入 -->
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username"
              placeholder="请输入手机号"
              prefix-icon="el-icon-user"
            />
          </el-form-item>

          <!-- 密码输入 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              show-password
            />
          </el-form-item>

          <!-- 验证码 -->
          <el-form-item prop="code">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-input
                  v-model="loginForm.code"
                  placeholder="请输入验证码"
                  prefix-icon="el-icon-key"
                />
              </el-col>
              <el-col :span="8">
                <div class="code-img" @click="refreshCode">
                  <img :src="codeSrc" alt="验证码" />
                </div>
              </el-col>
            </el-row>
          </el-form-item>

          <!-- 登录按钮 -->
          <el-form-item>
            <el-button type="primary" class="login-btn" @click="handleLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 其他登录方式 -->
        <div class="other-login">
          <div class="left">
            <img src="@/assets/wf.png" @click="otherLogin('WF')" alt="万方" />
            <img src="@/assets/qq.png" @click="otherLogin('QQ')" alt="QQ" />
            <img src="@/assets/wx.png" @click="otherLogin('WX')" alt="微信" />
          </div>
          <div class="right">
            <span @click="$emit('switchType', 'forget')">忘记密码?</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 注册入口 -->
    <div class="register-entry">
      <p>
        没有账号?
        <span @click="$emit('switchType', 'register')">立即注册</span>
      </p>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { randomLenNum } from '@/utils'
import { sendSmsCode } from '@/api/auth'

export default defineComponent({
  name: 'LoginBox',
  
  emits: ['switchType', 'handleLogin'],

  setup(props, { emit }) {
    const loginForm = reactive({
      username: '',
      password: '',
      code: '',
      randomStr: ''
    })

    const rules = {
      username: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码不能少于6位', trigger: 'blur' }
      ],
      code: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
      ]
    }

    const activeName = ref('password')
    const codeSrc = ref('')

    // 刷新验证码
    const refreshCode = () => {
      loginForm.code = ''
      loginForm.randomStr = randomLenNum(4, true)
      codeSrc.value = `http://your-api-domain/captcha?${new Date().getTime()}`
    }

    // 处理登录
    const handleLogin = () => {
      emit('handleLogin', loginForm)
    }

    // 第三方登录
    const otherLogin = (type) => {
      emit('switchType', type)
    }

    // 初始化验证码
    refreshCode()

    return {
      loginForm,
      rules,
      activeName,
      codeSrc,
      refreshCode,
      handleLogin,
      otherLogin
    }
  }
})
</script>

<style lang="scss" scoped>
.login-box {
  position: relative;
  padding: $spacing-large; /* 使用项目的间距变量 */
  border-radius: $border-radius-large; /* 使用项目的圆角变量 */
  background: $background-color-white; /* 使用项目的白色背景变量 */
  box-shadow: $box-shadow-base; /* 使用项目的阴影变量 */

  .login-btn {
    width: 100%;
    height: 40px;
    background: $primary-color; /* 使用项目的主色变量 */
    border-color: $primary-color; /* 使用项目的主色变量 */
    font-size: $font-size-base; /* 使用项目的字体大小变量 */
  }

  .code-img {
    height: 40px;
    cursor: pointer;
    
    img {
      width: 100%;
      height: 100%;
    }
  }

  .other-login {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: $spacing-small; /* 使用项目的间距变量 */

    .left {
      display: flex;
      gap: $spacing-mini; /* 使用项目的间距变量 */

      img {
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }

    .right {
      span {
        color: $text-secondary; /* 使用项目的次要文字颜色变量 */
        cursor: pointer;

        &:hover {
          color: $primary-color; /* 使用项目的主色变量 */
        }
      }
    }
  }

  .register-entry {
    text-align: center;
    margin-top: $spacing-base; /* 使用项目的间距变量 */
    padding-top: $spacing-base; /* 使用项目的间距变量 */
    border-top: 1px solid $border-color-light; /* 使用项目的边框颜色变量 */

    p {
      color: $text-regular; /* 使用项目的常规文字颜色变量 */
      font-size: $font-size-small; /* 使用项目的字体大小变量 */

      span {
        color: $primary-color; /* 使用项目的主色变量 */
        cursor: pointer;
      }
    }
  }
}
</style> 